<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/view-design/4.7.0/styles/iview.css" />
    <link rel="stylesheet" type="text/css" href="http://www.ajaxjs.com/public/common.css" />
    <link rel="stylesheet" type="text/css" href="http://www.ajaxjs.com/public/admin.css" />

    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/view-design/4.7.0/iview.min.js"></script>
    <script src="http://www.ajaxjs.com/public/common.js"></script>
    <script src="js/trend.js"></script>
    <style>
        body {
            padding: 2%;
        }

        .box {
            position: relative;
            height: 310px;
        }

        .box .xy {
            border-left: 1px solid lightgray;
            border-bottom: 1px solid lightgray;
            margin: 30px 0 30px 50px;
            min-height: 300px;
        }

        .in {
            position: absolute;
            left: 10px;
            width: 100%;
        }

        .in .dashed {
            float: right;
            border-bottom: 1px lightgray dashed;
            width: 96%;
            margin-top: 10px;
        }

        .xy svg {
            height: 100%!important;
        }

        path{
            stroke-width: 1px;
            
        }
    </style>
</head>

<body>
    <h2>系统实时情况</h2>
    <br />
    <br />
    <div id="live">
        <table width="100%">
            <tr>
                <td width="50%">

  

                </td>
                <td></td>
            </tr>
        </table>

        <div>
            <i-button type="primary" size="small">CPU 占用率：{{cpu.amount.toFixed(2)}}%</i-button>
        </div>
        <div class="box">
            <div class="in" style="top: 0%;">
                100%<div class="dashed"></div>
            </div>
            <div class="in" style="top: 25%;">
                75%<div class="dashed"></div>
            </div>
            <div class="in" style="top: 48%;">
                50%<div class="dashed"></div>
            </div>
            <div class="in" style="top: 71%;">
                25%<div class="dashed"></div>
            </div>
            <div class="in" style="top: 92%;">
                0%
            </div>
            <div class="xy">
                <trend :data="cpu.arr" :gradient="['#6fa8dc', '#42b983', '#2c3e50']" auto-draw :max="100"
                    :min="0" :padding="1">
                </trend>
            </div>
        </div>


    </div>

    <script>
        new Vue({
            el: '#live',
            data: {
                cpu: {
                    amount: 0,
                    arr: []
                }
            },
            mounted() {
                this.load();
                setInterval(() => { this.load(); }, 1000);
            },
            methods: {
                load() {
                    let api = 'http://localhost:8302/system_info/live/cpu';

                    aj.xhr.get(api, json => {
                        console.log(json);
                        let userPercent = json.data.userPercent * 100;
                        this.cpu.amount = userPercent;
                        this.cpu.arr.push(userPercent);
                    });
                }
            }
        });
    </script>
</body>

</html>